<template>
    <li>
        <!-- 表达式是true则渲染，是false则不渲染 -->
        <!-- <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)" /> -->
        <!-- 第2种写法 -->
        <!-- 
            不建议这么写，vue发现不了对象里面属性的改变。v-model不要绑定用props传进来的数据。
            vue原则是不能修改props数据 
            如果绑定了props对象的属性的值，虽然不会报错，但是不推荐这么使用，违背了vue的原则。
        -->
        <input type="checkbox" v-model="todo.done" />

        <span>{{todo.title}}</span>
        <!-- delete是被vue征用了。不能用delete -->
        <!-- <button @click="delete">删除</button> -->
        <button>删除</button>
    </li>
</template>

<script>
    export default {
        name : "MyItem",
        // 声明接受todo对象
        props:['todo',"updateCheckTodo"],
    }
</script>

<style scoped>
    li:hover{
        background-color: #666;
        color:white;
    }
    li:hover button{
        display:block;float:right;
    }
    li button{
        display:none;
    }
</style>
